<template>
  <!-- 添加或修改角色配置对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="650px">
    <el-form ref="form" :model="propFormData" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目名称" prop="projectId">
            <el-select v-model="propFormData.projectId" placeholder="请选择" @change="projectIdChangeFn" style="width:100%" >
              <el-option v-for="item in projectList" :key="item.projectId" :label="item.projectName" :value="item.projectId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人" prop="principalName">
            <el-input v-model="projectData.principalName" style="width:100%" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售员" prop="salemanName">
            <el-input v-model="projectData.salemanName" style="width:100%" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工时分类" prop="workTypeSecondId">
            <el-select v-model="propFormData.workTypeSecondId" placeholder="请选择" style="width:100%">
              <el-option v-for="dict in ((typeCascadeData[projectData.approval || 0] || {}).children || [])" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
            </el-select>
            <!-- <el-cascader style="width:100%" v-model="typeCascadeValue" :options="typeCascadeData" clearable></el-cascader> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="日期" prop="startDate">
            <el-date-picker v-model="propFormData.startDate" align="right" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:100%" :picker-options="startDateOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="时间" required>
            <el-col :span="12">
              <el-form-item prop="timeData">
                <el-time-picker is-range v-model="timeData" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" style="width:100%" value-format="HH:mm">
                </el-time-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="workHourCount">
                <el-input-number v-model="propFormData.workHourCount" controls-position="right" :step="0.1" :min="0" style="width:100px" /> (小时)
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="任务描述" prop="workDesc">
            <el-input v-model="propFormData.workDesc" type="textarea" maxlength="500" show-word-limit placeholder="请输入任务描述"  style="width:100%" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFormFn">确 定</el-button>
      <el-button @click="cancelFn">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { apiWorkhourAdd, apiWorkhourUpdate,apiListbystatusProject, apiWorkhourTypeList } from "../../../../api/pmp/api.workhour";

  export default {
    name: 'workhourDetail',
    props: {
      title: {
        type: String,
        default: ""
      },
      propFormData: {
        type: Object,
        default: function(){
          return {
            workHourId: undefined,
            projectId: undefined,
            workType: "1",
            projectType: 1,
            startDate: undefined,
            inside: "0",
            startTime: "9:00:00",
            endTime: "18:00:00",
            workHourCount: "0",
            workDesc: undefined,
            workTypeFirstId: undefined,
            workTypeSecondId: undefined
          };
        }
      }
    },
    data () {
      var checkTime = (rule, value, callback) => {
        if (!this.timeData || !this.timeData[0] || !this.timeData[1]) {
          return callback(new Error('请选择时间'));
        }
        if (this.timeData[0] == this.timeData[1]) {
          return callback(new Error('开始时间和结束时间不能一样'));
        }
        return callback();
      };
      var checkType = (rule, value, callback) => {
        if (!this.typeCascadeValue || !this.typeCascadeValue[1]) {
          return callback(new Error('请选择具体的项目类型'));
        }
        return callback();
      };
      return {
        // 是否显示弹出层
        open: false,
        // 日期范围
        dateRange: [],
        // 日期配置
        startDateOptions: {
          // disabledDate(time) {
          //   let Nowdate=new Date();
          //   let WeekFirstDay=new Date(Nowdate-Nowdate.getDay()*86400000).getTime();
          //   return  WeekFirstDay >= time.getTime() || time.getTime() >= new Date((WeekFirstDay/1000+7*86400)*1000).getTime();
          // }
        },
        // 工时类型数据字典
        typeOptions: [],
        // 选中的数据
        typeCascadeValue:[],
        typeCascadeData:[{
          value:1,
          label:'项目类',
          children:[{
            value:2,
            label: '技术交流',
            children: null
          },{
            value: 3,
            label: '技术支持'
          },{
            value: 4,
            label: '故障处理'
          }]
        },{
          value:'5',
          label:'非立项类',
          children:[{
            value: '6',
            label: '培训'
          },{
            value: '7',
            label: '商务工作'
          },{
            value: '8',
            label: '售前技术交流'
          }]
        },{
          value:'9',
          label:'组织类',
          children:[{
            value: '10',
            label: '个人自学'
          },{
            value: '11',
            label: '团建活动'
          }]
        }],
        // 工时选择数组
        timeData: [],
        // 数据范围选项
        projectList: [
          {
            projectId: 0,
            projectName: "",
            salemanName: "",
            principalName: ""
          }
        ],
        // 下拉框选中的项目
        projectData: {},
        queryParams: {
          excludeProjectStatus: "6,7"
        },
        // 表单校验
        rules: {
          projectId: [
            { required: true, message: "请选择项目", trigger: "change" }
          ],
          workTypeSecondId: [
            { required: true, message: "请选择工时分类", trigger: "change" }
          ],
          startDate: [
            { required: true, message: "请填写日期", trigger: "blur" }
          ],
          timeData: [
            {  validator: checkTime, trigger: 'blur,change' }
          ],
          workHourCount: [
            { required: true, message: "请填写工时", trigger: "blur" }
          ],
          workDesc: [
            { required: true, message: "任务描述不能为空", trigger: "blur" }
          ]
        }
      };
    },
    created() {
      this.apiGetDicts("technology_post_type").then(response => {
        this.typeOptions = response.data;
      });
      apiWorkhourTypeList().then(res => {
        this.typeCascadeData = res.data;
      });
    },
    watch: {
      propFormData(val){
        this.projectData.principalName = val.principalName;
        this.projectData.salemanName = val.salemanName;
        this.projectData.approval = val.approval || 0;
        this.timeData = [val.startTime, val.endTime];
        this.typeCascadeValue = [parseInt(val.workTypeFirstId) , parseInt(val.workTypeSecondId)];
        // this.typeCascadeValue = [null,null];
      }
    },
    methods: {
      // 取消按钮
      cancelFn() {
        this.open = false;
        this.resetFn();
      },
      /** 提交按钮 */
      submitFormFn: function() {
        let propFormData = { workHourId:'' };
        propFormData = {...this.propFormData, startTime:(this.timeData || [])[0], endTime:(this.timeData || [])[1], projectId:this.projectData.projectId, workTypeSecond: this.propFormData.workTypeSecondId};
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (propFormData.workHourId != undefined) {
              apiWorkhourUpdate(propFormData).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.$parent.getListFn();
                } else {
                  this.msgError(response.msg);
                }
              });
            } else {
              apiWorkhourAdd(propFormData).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.$parent.getListFn();
                } else {
                  this.msgError(response.msg);
                }
              });
            }
          }
        });
      },
      // 获取项目列表
      getProjectListFn(){
        apiListbystatusProject(this.queryParams)
          .then(res => {
            this.loading = false;
            this.total = res.total;
            this.projectList = res.rows;
          });
      },
      // 选择项目下拉框
      projectIdChangeFn(selection) {
        let ids = this.projectList.find(item => item.projectId == selection);
        this.projectData = ids;

      },
      // 打开页面
      openDetail(){
        this.resetFn();
        this.getProjectListFn();
        this.open = true;
      },
      // 表单重置
      resetFn() {
        //
        // this.typeCascadeValue = [];
      }
    }
  };
</script>
